<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>秒表</title>
  <script src="../js/jquery-1.12.1.js"></script>
</head>
<body>
<h1>时钟</h1>
<div id="date">
  <span id="hour_box">0</span> : <span id="min_box">0</span> : <span id="sce_box">0</span>
  <button id="start">开始</button>
  <button id="pass">暂停</button>
  <button id="reset">停止</button>
</div>
<script>
  let hour = 0;
  let min = 0;
  let second = 0;
  $("#start").click(() => {
    $("#start").text("恢复").attr('disabled', true);
    // $("#start")
    var idInt = setInterval(function () {
      if (second > 59) {
        second = 0;
        min++;
        $("#min_box").text(min);
        $("#sce_box").text(second);
        if (min > 59) {
          hour++;
          min = 0;
          $("#hour_box").text(hour);
        }
      } else {
        second++;
        $("#sce_box").text(second);
      }

      // #()
      console.log(second);
    }, 1000);
    $("#pass").click(
        function () {
          clearInterval(idInt);
          $("#start").text("恢复").attr('disabled', false);
        }
    );
    $("#reset").click(
        function () {
          hour = 0;
          min = 0;
          second = 0;
          $("#min_box").text(min);
          $("#sce_box").text(second);
          $("#hour_box").text(hour);
          clearInterval(idInt);
          $("#start").text("开始").attr('disabled', false);
        }
    );
  });

</script>
</body>
<style>
</style>
</html>